<template>
  <div class="box">
    <header class="header">
      <div class="top">
        <a  @click="goBack" class="iconfont icon-zuojiantou1"></a>
        <a>个人信息</a>
      </div>
    </header>
    <div class="content">
      <ul>
        <li alt="" @click="getPhoto"><a>头像</a><span class="iconfont icon-back-copy"></span><img src="./../../assets/food2.jpg"/></li>
        <li><a>昵称</a><span class="iconfont icon-back-copy"></span><em>一枚水果软糖</em></li>
        <li><a>性别</a><span class="iconfont icon-back-copy"></span><em>男</em></li>
        <li><a>生日</a><span class="iconfont icon-back-copy"></span><em>请选择</em></li>
        <li><a>职业</a><span class="iconfont icon-back-copy"></span><em>请选择</em></li>
        <li><a>家乡</a><span class="iconfont icon-back-copy"></span><em>请选择</em></li>
        <li><a>个性签名</a><span class="iconfont icon-back-copy"></span><em>未设置</em></li>
      </ul>
    </div>
    <mt-actionsheet :actions="actions" v-model="sheetVisible"></mt-actionsheet>
  </div>
</template>
<script>
import Vue from 'vue'
import { Actionsheet } from 'mint-ui'
Vue.use(Actionsheet)
export default {
  data () {
    return {
      actions: [{
        name: '拍照',
        method: this.takephoto1
      }, {
        name: '相册选取',
        method: this.takephoto2
      }],
      sheetVisible: false
    }
  },
    methods: {
    getPhoto () {
      this.sheetVisible = !this.sheetVisible
    },
    goBack () {
      this.$router.go(-1)
    }
  }
}
</script>

<style lang="scss" scoped>
@import '@/lib/reset.scss';
  .header{
    @include rect(100%,0.44rem);
    @include background-color(#fff);
    @include text-color(#000);
    .top{
      @include rect(100%,0.44rem);
      border-bottom:1px solid #bbb;
      a:nth-of-type(1){
        @include font-size(20px);
        @include text-color(#000);
        @include line-height(38px);
        @include margin(3px 0 0 15px);
        font-weight: 500;
        float:left;
      }
      a:nth-of-type(2){
        @include font-size(18px);
        @include text-color(#000);
        // @include font-weight(600);
        @include line-height(44px);
        @include margin(0 25px);
        float:left;
      }
    }
  }
  .content{
    @include rect(100%,auto);
    @include background-color(rgba(241, 239, 239, 0.932));
      img{ 
        border:1px solid #333;
        // @include margin(20px 0 0 30px);
        float: left;
        @include border-radius(50%);
        @include rect(0.4rem,0.4rem);
        @include border-radius(50%);
      }
      ul{
      @include rect(100%,auto);
      
      }
      li{
      @include overflow();
      width:100%;
      height:50px;
      display: block;
      border-bottom:1px solid #bbb;
      float: left;
      @include margin(0 0 1px 0);
      @include background-color(#fff);
      }
      li:nth-of-type(1){
        @include rect(100%,55px);
        line-height: 50px;
        margin-top:8px;
      }
      li:nth-of-type(2){
        @include margin(0 0 15px 0);
      }
      li img{
        float:right;
        margin:10px 6px 0 0;
      }
      li a{
        @include font-size(16px);
        @include text-color(#000);
        @include line-height(50px);
        @include margin(0 20px);
        float:left;
      }
      li em{
        @include margin(0 6px 0 0);
        float:right;
        @include font-size(12px);
        @include line-height(50px);
        font-weight: 300;
        text-align: right;
      }
      li span{
        float: right;
        font-size:20px;
        margin:8px 20px 0 0;
        color:#000;
        font-weight: 700;
      }
    }

</style>
